<!--客户管理页面-->
<template>
  <div class="app-container">
    <el-form
      ref="form"
      inline
      :model="form"
      class="form-options"
      label-width="100px"
    >
      <el-form-item label="客户名称" prop="name">
        <el-autocomplete
          ref="nameRef"
          v-model="form.name"
          placeholder="请输入客户名称"
          value-key="name"
          :fetch-suggestions="querySysCustom"
          :trigger-on-focus="true"
          clearable
          @select="handleSelectCustom"
          @clear="clickClearName"
        />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-autocomplete
          ref="contactsRef"
          v-model="form.contacts"
          placeholder="请输入联系人"
          value-key="name"
          :fetch-suggestions="querySysUser"
          :trigger-on-focus="true"
          clearable
          @select="handleSelectUser"
          @clear="clickClearContacts"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入联系电话" clearable />
      </el-form-item>
      <!-- <el-form-item label="供应鱼品" prop="fishType">
        <el-autocomplete
          v-model="form.fishType"
          placeholder="请选择供应鱼品"
          value-key="name"
          :fetch-suggestions="querySearchPurchaseNo"
          :trigger-on-focus="true"
          clearable
          @select="handleSelectPurchaseNo"
        />
      </el-form-item> -->
      <el-form-item label="录入日期" class="long-content" prop="createTime">
        <el-date-picker
          v-model="form.createTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right"
        />
      </el-form-item>

      <div class="btns">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button type="success" @click="handleAdd">新增</el-button>
        <el-button @click="resetFormSearch('form')">重置</el-button>
      </div>
    </el-form>
    <!--列表-->
    <el-table
      v-loading="loading"
      :data="tableData"
      header-cell-class-name="table-header"
      style="width: 100%; margin-top: 20px"
      show-overflow-tooltip
    >
      <el-table-column
        label="序号"
        type="index"
        width="50"
        show-overflow-tooltip
      />
      <el-table-column prop="name" label="客户名称" show-overflow-tooltip />
      <el-table-column prop="product" label="产品需求" show-overflow-tooltip />
      <el-table-column prop="contacts" label="联系人" show-overflow-tooltip />
      <el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
      <el-table-column prop="address" label="地址" show-overflow-tooltip />
      <el-table-column prop="remark" label="备注" show-overflow-tooltip />
      <el-table-column prop="createName" label="创建人" show-overflow-tooltip />
      <el-table-column
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleUpdate(scope.row)"
            >修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div style="text-align: right; margin-top: 15px">
      <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="[10, 15, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form
        ref="diaForm"
        :model="diaForm"
        :rules="rules"
        class="form-options"
        label-width="120px"
      >
        <el-form-item label="客户名称" prop="name">
          <el-input
            v-model="diaForm.name"
            placeholder="请输入客户名称"
            clearable
            style="width: 150%"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="产品需求" prop="product">
          <el-input
            v-model="diaForm.product"
            placeholder="请输入产品需求"
            clearable
            style="width: 150%"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input
            v-model="diaForm.contacts"
            placeholder="请输入联系人"
            clearable
            style="width: 150%"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="diaForm.phone"
            placeholder="请输入联系电话"
            clearable
            style="width: 150%"
          />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
            type="textarea"
            v-model="diaForm.address"
            placeholder="请输入"
            clearable
            style="width: 150%"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="diaForm.remark"
            placeholder="请输入"
            clearable
            style="width: 150%"
            maxlength="120"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" style="display: flex; justify-content: center">
        <el-button type="primary" @click="onSubmit()">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCustomerList, getFishTypeList, getUserList } from "@/api/common";
import {
  getCustomerQuery,
  getCustomerAdd,
  getCustomerUpdate,
} from "@/api/custom";

export default {
  name: "InventoryMake",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      form: {
        name: "",
        contacts: "",
        phone: "",
        fishType: "",
        createTime: null,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      loading: false,
      tableData: [],
      dialogVisible: false,
      diaForm: {
        name: "",
        product: "",
        contacts: "",
        phone: "",
        address: "",
        remark: "",
      },
      rules: {
        name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        product: [
          { required: true, message: "请输入产品需求", trigger: "blur" },
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
      sysUsers: [],
      sysCustoms: [],
      sysFishs: [],
      dialogTitle: "",
    };
  },
  created() {
    this.getUserListFun();
    this.getCustomerListFun();
    this.getFishTypeListFun();
    this.onQuery();
  },
  methods: {
    // 分页
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableData();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 接口-用户下拉
    getUserListFun() {
      getUserList({}).then((res) => {
        this.sysUsers = res.resultData;
      });
    },
    // 接口-鱼品下拉
    getFishTypeListFun() {
      getFishTypeList({}).then((res) => {
        this.sysFishs = res.resultData;
      });
    },
    // 接口-客户下拉
    getCustomerListFun() {
      getCustomerList({ page: 1, rows: 999 }).then((res) => {
        this.sysCustoms = res.resultData;
      });
    },
    // 查询
    onQuery() {
      console.log("查询", this.form);
      this.currentPage = 1;
      this.getTableData();
    },
    // 查询盘库列表数据
    getTableData() {
      this.loading = true;
      const { createTime } = this.form;
      if (createTime && createTime.length > 0) {
        this.$set(this.form, "beginTime", createTime[0]);
        this.$set(this.form, "endTime", createTime[1]);
      } else {
        this.$set(this.form, "beginTime", "");
        this.$set(this.form, "endTime", "");
      }
      const params = {
        page: this.currentPage,
        rows: this.pageSize,
        ...this.form,
      };
      getCustomerQuery(params)
        .then((res) => {
          this.tableData = res.resultData;
          this.total = res.total;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 鱼品类型下拉
    querySearchPurchaseNo: function (queryString, cb) {
      const r = this.sysFishs;
      var rs = queryString ? r.filter(this.createFilter(queryString)) : r;
      cb(rs);
    },
    handleSelectPurchaseNo(item) {
      this.form.fishType = item.name;
    },
    // 用户信息下拉
    querySysUser(queryString, cb) {
      const r = this.sysUsers;
      var rs = queryString
        ? r.filter(this.createFilterUserName(queryString))
        : r;
      cb(rs);
    },
    handleSelectUser(item) {
      this.form.contacts = item.name;
    },
    // 客户信息下拉
    querySysCustom(queryString, cb) {
      const r = this.sysCustoms;
      var rs = queryString
        ? r.filter(this.createFilterUserName(queryString))
        : r;
      cb(rs);
    },
    handleSelectCustom(item) {
      this.form.name = item.name;
    },

    clickClearName() {
      this.$nextTick(() => {
        if (this.$refs.nameRef) {
          this.$refs.nameRef.activated = true;
        }
      });
    },

    clickClearContacts() {
      this.$nextTick(() => {
        if (this.$refs.contactsRef) {
          this.$refs.contactsRef.activated = true;
        }
      });
    },

    // 模糊建议公共方法
    createFilter(queryString) {
      return (rr) => {
        return rr.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
      };
    },
    createFilterUserName(queryString) {
      return (rr) => {
        return (
          rr.userName.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    // 新增
    handleAdd() {
      this.dialogTitle = "新增";
      this.dialogVisible = true;
      this.resetForm("diaForm");
    },
    // 修改
    handleUpdate(row) {
      this.dialogTitle = "修改";
      this.diaForm = row;
      this.dialogVisible = true;
    },
    // 新增 | 编辑 提交
    onSubmit() {
      this.$refs["diaForm"].validate((valid) => {
        if (valid) {
          if (this.diaForm.id && this.diaForm.id != null) {
            getCustomerUpdate(this.diaForm).then((res) => {
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.onQuery();
              this.dialogVisible = false;
            });
          } else {
            getCustomerAdd(this.diaForm).then((res) => {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.onQuery();
              this.dialogVisible = false;
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 搜索重置
    resetFormSearch(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        this.$refs[formName].clearValidate();
        this.currentPage = 1;
        this.onQuery();
      });
    },
    // 重置
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        this.$refs[formName].clearValidate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
.grid-content {
  margin-top: 20px;
  border-radius: 4px;
  text-align: center;
  min-height: 36px;
  line-height: 36px;
}
.bg-purple {
  background: #e5e9f2;
}
</style>
